<template>
    <div class="wrapper" ref="wrap">
      <div class="content-wrap">
        <div class="search-top">
          <span class="iconfont right-icon">&#xe632;</span>
          <input v-model="keyword" class="search-input" type="text" placeholder="请输入感兴趣的关键词">
          <span class="iconfont right-icon" v-show="show">&#xe632;</span>
        </div>
        <!--  搜索内容容器 -->
        <div class="search-content" v-show="keyword" >
          <div class="search-wrap" ref="searchwrap">
            <ul>
              <li class="search-list" v-for="item of listSearch">
                <div class="item-contente">
                  <div class="item-left">
                    <p class="item-left-text">{{item.title}}</p>
                    <p class="item-time"><span>{{item.text}}</span></p>
                  </div>
                  <div class="item-right"><img :src="item.imgUrl"></div>
                </div>
              </li>
              <li class="search-list feedback" v-show="hasList" >
                没有搜索到相关内容
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  // 引入 better-scroll 页面滑动插件
  import BScroll from  'better-scroll'

  export default {
    name: 'XinFangSearch',
    // 注册组件
    components: {

    },
    // 接收JSON 数据
    props: {
      list: Array,
    },
    data () {
      return {
        keyword: '',
        listSearch: [],
        timer: null,
        show: false
      }
    },
    // 计算属性
    computed:{
      hasList (){
        return !this.listSearch.length
      }

    },
    //方法
    methods: {

    },
    //侦听 keyword
    watch: {
      keyword () {
        // 函数节流
        if (this.timer) {
          clearTimeout(this.timer)
        }
        // 判断用户是否输入，如果没有输入过，则不显示 listSearch 搜索数据
        if (!this.keyword){
          this.listSearch = []
          // 结束，后面代码则不执行
          return
        }
      // 1.当用户输入了内容，显示 清除按钮
      // 2.当用户清除后，隐藏清除按钮
        if (this.keyword){
           this.show = true
           return
        }

        // 当 keyword发生改变时，隔100毫秒自动执行
        this.timer = setTimeout(() => {
          const result = []
          // 循环拿到数组中的对象{}, 判断 （检索对象中的title 中是否有用户输入的字符...)
          this.list.forEach((value) => {
            if (value.title.indexOf(this.keyword) > -1) {
              result.push(value)
            }
          })
          this.listSearch = result
        }, 100)




      }
    },
    mounted () {
      // 使用 better-scroll 页面滑动插件
      this.scroll  = new BScroll(this.$refs.searchwrap)
    }

  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    display flex
    justify-content center
    align-items center

  .content-wrap
    width 100%


  .search-top
    width 100%
    color #999
    text-align center
    line-height $headerHeight
    /*margin-top .1rem*/
    border-radius 0.1rem
    border .01rem solid #efefef
    BackgroundShadow2()
    background white


  .search-input
    box-sizing border-box
    line-height $headerHeight
    padding 0 .1rem
    text-align left


  .search-content
    overflow hidden
    position absolute
    top 1.8rem
    left  0
    right  0
    bottom  0
    background #dedede
    color black
    z-index 2

  .search-wrap
    overflow hidden
    position relative
    top 0
    buttom 0
    left 0
    right 0
    z-index 2
    background #dedede
    height 100%

  .search-list
    padding .2rem .3rem .1rem

  .item-contente
    background white
    display flex
    padding .1rem .2rem
    border-radius .2rem


  .item-left
    width 4rem
    height 2rem
    display flex
    flex-direction column
    justify-content space-around
    padding-right .8rem

  .item-left-title
    font-size .34rem
    font-weight bolder

  .item-left-text
    line-height .4rem
    overflowEllipsis2()

  .item-right
    width 2.3rem
    height 2rem
    overflow hidden

  .item-right img
    img()

  .item-time
    information()

  .item-more
    button()

  .feedback
    text-align center
    font-weight bolder
    margin-top 0.5rem
    color red

</style>
